﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs（懒加载）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    
    <br />
    <div id="tabs1" class="mini-tabs" activeIndex="0" style="width:600px;height:350px;"
        ontabdestroy="onTabDestroy" titleField="title" urlField="url"
        url="../tabs/tabs.txt" onactivechanged="onTabsActiveChanged"
    >   
    </div>

    <script type="text/javascript">
        mini.parse();

        function onTabsActiveChanged(e) {
            var tabs = e.sender;
            var tab = e.tab;
            
            tabs.loadTab("../tabs/pages/page1.html", tab);
        }

    </script>
    <div class="description">
        <h3>Description</h3>
        <p>        
              点击tab页签时，其相关的页面才会被“懒加载”，而且只加载一次。<br />
              Tab1演示了，只要点击就加载，加载多次。
        </p>
    </div>
</body>
</html>